<!-- @format -->

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<style>
			#bookList {
				width: 500px;
				background-color: skyblue;
				float: left;
				padding: 10px;
			}

			ul {
				list-style: none;
				line-height: 30px;
				margin-right: 20px;
			}

			span {
				float: right;
			}

			#addBook {
				width: 300px;
				background-color: lightgreen;
				float: left;
				margin-left: 20px;
				padding: 10px;
			}

			#addBook table {
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="bookList">
			<h2>图书列表</h2>
			<ul id="books">
				<li>获取中...</li>
			</ul>
		</div>
		<div id="addBook">
			<h2>添加图书</h2>
			<form action="#">
				<table>
					<tr>
						<td>图书名字：</td>
						<td>
							<input
								type="text"
								placeholder="请输入图书名字"
								name="bookName"
							/>
						</td>
					</tr>
					<tr>
						<td>图书作者：</td>
						<td>
							<input
								type="text"
								placeholder="请输入图书作者"
								name="author"
							/>
						</td>
					</tr>
					<tr>
						<td>图书出版社：</td>
						<td>
							<input
								type="text"
								placeholder="请输入图书出版社"
								name="publisher"
							/>
						</td>
					</tr>
					<tr>
						<td>图书创建者：</td>
						<td>
							<input
								type="text"
								placeholder="请输入图书创建者"
								name="creator"
							/>
						</td>
					</tr>
					<tr>
						<td colspan="2" style="padding-top: 10px">
							<button onclick="addBook()">新增</button>
						</td>
					</tr>
				</table>
			</form>
		</div>
	</body>

	<script>
		// 定义数据数组
		let bookList = [];

		// 获取操作对象
		const form = document.querySelector("form");
		const bookNameInput = document.querySelector("input[name='bookName']");
		const authorInput = document.querySelector("input[name='author']");
		const publisherInput = document.querySelector(
			"input[name='publisher']"
		);
		const creatorInput = document.querySelector("input[name='creator']");
		const books = document.querySelector("#books");

		// 添加书本配置
		const postConfig = {
			method: "post",
			url: "https://hmajax.itheima.net/api/books",
			headers: {
				"Content-Type": "application/json",
			},
			// 数据对象
			data: "",
		};

		// 获取书本配置
		const getConfig = {
			method: "get",
			url: "https://hmajax.itheima.net/api/books?creator=ttf",
			headers: {},
		};

		// 删除书本配置
		const delConfig = {
			method: "delete",
			headers: {},
		};

		// 加载页面时先获取一次
		getBookList();

		// 获取书本
		function getBookList() {
			axios(getConfig)
				.then((response) => {
					bookList = response.data.data;
					books.innerHTML = bookList
						.map((item) => {
							return `<li>编号(${item.id}): ${item.bookname} <span><button onclick="delBook(${item.id})">删除</button></span></li>`;
						})
						.join("");
				})
				.catch((err) => {
					console.log(error);
				});
		}

		// 添加书本
		function addBook() {
			postConfig.data = JSON.stringify({
				bookname: bookNameInput.value,
				author: authorInput.value,
				publisher: publisherInput.value,
				creator: creatorInput.value,
			});
			axios(postConfig)
				.then((response) => {
					form.reset();
					alert(response.data.message);
					getBookList();
				})
				.catch((err) => {
					console.log(error);
				});
		}

		// 删除书本
		function delBook(id) {
			delConfig.url = "https://hmajax.itheima.net/api/books/" + id;
			axios(delConfig)
				.then((response) => {
					alert(response.data.message);
					getBookList();
				})
				.catch((err) => {
					console.log(error);
				});
		}
	</script>
</html>
